<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-carousel>
      <el-carousel-item v-for="b in bannerArr">
        <img :src="b.imgUrl" style="width: 100%;height: 100%">
      </el-carousel-item>
    </el-carousel>
    <!--  食谱相关开始  -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">烘焙食谱</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" default-active="0" @select="recipeSelect" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item v-for="c in recipeCategoryArr" :index="c.id">{{ c.name }}</el-menu-item>

        </el-menu>
      </el-col>
    </el-row>
    <!--  内容列表开始  -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="c in recipeArr" style="margin: 10px 0">
        <el-card>
          <router-link :to="'/detail?id='+c.id">
            <img :src="BASE_URL+c.imgUrl" style="width: 100%;height: 145px">
            <p class="title_p">{{ c.title }}</p>
          </router-link>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-avatar :size="35" :src="BASE_URL+c.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="20">
              <p style="margin-top: 10px">
                {{ c.nickname }}
                <span style="font-size: 12px;color: #666;float: right">{{ c.categoryName }}</span>
              </p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button @click="more(1)">点击加载更多</el-button>
    </div>
    <!--  内容列表结束  -->
    <!--  食谱相关结束  -->


    <!--  视频相关开始  -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">烘焙视频</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" default-active="0" @select="videoSelect" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item v-for="c in videoCategoryArr" :index="c.id">{{ c.name }}</el-menu-item>

        </el-menu>
      </el-col>
    </el-row>
    <!--  内容列表开始  -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="c in videoArr" style="margin: 10px 0">
        <el-card>
          <router-link :to="'/detail?id='+c.id">
            <img :src="BASE_URL+c.imgUrl" style="width: 100%;height: 145px">
            <p class="title_p">{{ c.title }}</p>
          </router-link>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-avatar :size="35" :src="BASE_URL+c.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="20">
              <p style="margin-top: 10px">
                {{ c.nickname }}
                <span style="font-size: 12px;color: #666;float: right">{{ c.categoryName }}</span>
              </p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button @click="more(2)">点击加载更多</el-button>
    </div>
    <!--  内容列表结束  -->
    <!--  视频相关结束  -->


    <!--  资讯相关开始  -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">行业资讯</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" default-active="0" @select="infoSelect" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item v-for="c in infoCategoryArr" :index="c.id">{{ c.name }}</el-menu-item>

        </el-menu>
      </el-col>
    </el-row>
    <!--  内容列表开始  -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="c in infoArr" style="margin: 10px 0">
        <el-card>
          <router-link :to="'/detail?id='+c.id">
            <img :src="BASE_URL+c.imgUrl" style="width: 100%;height: 145px">
            <p class="title_p">{{ c.title }}</p>
          </router-link>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-avatar :size="35" :src="BASE_URL+c.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="20">
              <p style="margin-top: 10px">
                {{ c.nickname }}
                <span style="font-size: 12px;color: #666;float: right">{{ c.categoryName }}</span>
              </p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button @click="more(3)">点击加载更多</el-button>
    </div>
    <!--  内容列表结束  -->
    <!--  资讯相关结束  -->


  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import router from "@/router";

const more = (type)=>{
  router.push('/list?type='+type);
}
const recipeSelect = (index, indexPath) => {
  //index代表的是二级分类的id
  loadContents(1, index);
}
const videoSelect = (index, indexPath) => {
  loadContents(2, index);
}
const infoSelect = (index, indexPath) => {
  loadContents(3, index);
}

const recipeArr = ref([]);
const videoArr = ref([]);
const infoArr = ref([]);

const loadContents = (type, categoryId) => {
  axios.get(BASE_URL + '/v1/contents/' + type + "/" + categoryId + "/index")
      .then((response) => {
        if (response.data.code == 1) {
          switch (type) {
            case 1:
              recipeArr.value = response.data.data;
              break;
            case 2:
              videoArr.value = response.data.data;
              break;
            case 3:
              infoArr.value = response.data.data;
              break;
          }
        }
      })
}

const recipeCategoryArr = ref([]);
const videoCategoryArr = ref([]);
const infoCategoryArr = ref([]);
onMounted(() => {
  //请求轮播图数据
  axios.get(BASE_URL+'/v1/banners').then((response)=>{
    if (response.data.code==1){
      bannerArr.value = response.data.data;
    }
  })

  //请求三种类型下的所有二级分类数据
  loadContents(1, 0);
  loadContents(2, 0);
  loadContents(3, 0);

  //请求三个类型下的二级分类
  axios.get(BASE_URL + '/v1/categories/1/sub').then((response) => {
    if (response.data.code == 1) {
      recipeCategoryArr.value = response.data.data
    }
  });
  axios.get(BASE_URL + '/v1/categories/2/sub').then((response) => {
    if (response.data.code == 1) {
      videoCategoryArr.value = response.data.data
    }
  });
  axios.get(BASE_URL + '/v1/categories/3/sub').then((response) => {
    if (response.data.code == 1) {
      infoCategoryArr.value = response.data.data
    }
  });
})
const bannerArr = ref([])
const contentArr = ref([
  {
    "id": 27,
    "title": "家常面包",
    "imgUrl": "/imgs/a.jpg",
    "categoryName": "面包",
    "nickname": "汤姆",
    "userImgUrl": "/imgs/head.jpg"
  },
  {
    "id": 18,
    "title": "爆浆抹茶甜甜圈面包，自带幸福感的小甜甜",
    "imgUrl": "/imgs/b.jpg",
    "categoryName": "家常菜",
    "nickname": "汤姆",
    "userImgUrl": "/imgs/head.jpg"
  },
  {
    "id": 17,
    "title": "心形火龙果椰蓉面包,任谁都抗拒不了",
    "imgUrl": "/imgs/c.jpg",
    "categoryName": "小食",
    "nickname": "汤姆",
    "userImgUrl": "/imgs/head.jpg"
  },
  {
    "id": 16,
    "title": "蔓越莓绿豆糕，味道还不错值得一试!",
    "imgUrl": "/imgs/d.jpg",
    "categoryName": "面包",
    "nickname": "汤姆",
    "userImgUrl": "/imgs/head.jpg"
  },
])
</script>

<style scoped>
.title_p {
  height: 40px;
  overflow: hidden; /*超出不显示*/
  /*设置省略号相关样式*/
  display: -webkit-box;
  -webkit-line-clamp: 2; /*设置行数*/
  -webkit-box-orient: vertical; /*纵向*/
}
a{
  color: #333;
  text-decoration: none;
}
a:hover{
  color: orange;
}

</style>